<template>
    <div class="app-container" style="height:100%">
        <!-- 操作按钮--样式待美化 -->
        <el-form>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="close()">返回</el-button>
            </el-form-item>
        </el-form>
        <!-- 表单数据 -->
        <h4 class="form-header h4">聊天室基本信息</h4>

        <el-form ref="form" :model="form" :rules="rules" style="padding: 10px;overflow-y: auto;" label-width="100">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="名称" prop="name">
                        <!--  :disabled="opt=='edit' " -->
                        <el-input placeholder="请输入房间名称" v-model="form.name" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="聊天室类型" prop="groupType">
                        <el-select  disabled v-model="form.groupType" placeholder="请选择聊天室类型" clearable style="width: 100%">
                            <!-- 绑定下拉框值， -->
                            <el-option v-for="dict in chatGoupTypeDic" :key="dict.value"
                                :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="创建人" prop="userId">
                        <el-input v-model="form.userName" disabled></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="状态" prop="status">
                        <el-select disabled v-model="form.status" placeholder="请选择房间状态" clearable style="width: 100%">
                            <!-- 绑定下拉框值， -->
                            <el-option v-for="dict in dict.type.pcj_chat_group_status" :key="dict.value"
                                :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="创建时间" prop="beginTime">
                        <el-date-picker disabled v-model="form.beginTime" style="width: 100%;" type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="结束时间" prop="endTime">
                        <el-date-picker disabled v-model="form.endTime" style="width: 100%;" type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="房间总人数" prop="userNum">
                        <!-- <el-input-number style="width: 100%;" precision="0" v-model="form.userNum"
                            controls-position="right"></el-input-number>
                    -->
                        <el-input v-model="form.userNum" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="房间描述" prop="remark">
                        <el-input disabled type="textarea"  v-model="form.remark"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="房间图标">
                        <!-- :limit="1" -->
                        <imageUpload v-model="form.icon"  />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <h4 class="form-header h4">聊天室成员信息</h4>
        <el-table border :data="chatGroupUserList">
            <!-- <el-table-column type="selection" width="50" align="center" ></el-table-column> -->
            <el-table-column label="姓名" align="left" prop="userName"></el-table-column>
            <el-table-column label="手机号码" align="center" prop="userPhone"></el-table-column>
            <el-table-column label="加入时间" align="center" prop="entryTime"></el-table-column>
            <el-table-column label="状态" align="center" prop="status">
                <!-- 用平台方法回填字典类型值 -->
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.pcj_chat_group_user_status" :value="scope.row.status" />
                </template>
            </el-table-column>

            <el-table-column label="最新发言时间" align="center" prop="entryTime"></el-table-column>
            <el-table-column label="聊天条数" align="center" prop="dept.deptName"></el-table-column>
            <!-- 
            <el-table-column label="操作" align="center" width="160"
                class-name="small-padding fixed-width"></el-table-column> -->
        </el-table>
        <!-- @pagination="getList" -->
        <pagination v-show="chatGroupUserTotal > 0" :total="chatGroupUserTotal" :page.sync="chatGroupUserParams.pageNum"
            :limit.sync="chatGroupUserParams.pageSize" @pagination="getChatGroupUserData"></pagination>
    </div>
</template>

<script>
// 引入对应的请求
import {
    getChatGroup,
    updateChatGroup,
    addChatGroup
} from "@/api/pcj/chatGroup";
import {
    getChatGroupUserData
} from "@/api/pcj/chatGroupUser";
import { tbDict } from "../../../api/utils/msUtils.js";
export default {
    dicts: ["pcj_chat_group_status", "pcj_chat_group_user_status"],
    //当前页面的名称，需要自己定义-self
    name: "pcjChatGroupForm",
    //存放引入其他页面的组件名称
    components: {},
    //接受父组件传递的值
    props: {},
    data() {
        return {
            // 表单数据
            form: {},
            // 表单验证规则
            rules: {
                name: [
                    { required: true, message: "房间名称", trigger: "blur" }
                ],  groupType: [
                    { required: true, message: "房间类型", trigger: "change" }
                ],
            },
            //子表数据
            pcjChatGroupUserList: [],
            //opt：edit-编辑，add-新增
            opt: "",
            //用户列表数据
            chatGroupUserList: [],
            //分页数据
            chatGroupUserTotal: 0,
            chatGroupUserParams: {
                pageNum: 1,
                pageSize: 10,
                groupId: ""//聊天室id
            },
            //聊天室类型
            chatGoupTypeDic: []
        };
    },
    mounted() {
        //获取列表路由过来的入参
        this.opt = this.$route.query.opt;
        //所有页面的初始化操作全部在这方法
        this.initData();
    },
    watch: {},
    methods: {
        //一些数据的初始化方法在这里调用
        initData() {
            //初始化表单信息
            this.initFormData(this.opt);
            tbDict("pcjChatGroupType").then(res => {
                this.chatGoupTypeDic = res;
            });
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                delFlag: 0,
                createId: null,
                createBy: null,
                createTime: null,
                updateId: null,
                updateBy: null,
                updateTime: null,
                remark: null,
                userId: null,
                name: null,
                icon: null,
                status: null,
                userNum: null,
                onlieNum: null,
                beginTime: null,
                endTime: null,
                groupType:null,
            };
            this.pcjChatGroupUserList = [];
        },
        /**
         * 初始化表单方法在这写
         * @param opt edit-编辑，add-新增
         */
        initFormData(opt) {
            //如果是编辑，初始化信息
            if ("edit" == opt) {
                let id = this.$route.query.id;
                getChatGroup(id).then(response => {
                    this.form = response.data;
                    this.pcjChatGroupUserList = response.data.pcjChatGroupUserList;
                });
                this.chatGroupUserParams.groupId = id;
                this.getChatGroupUserData();
            }
            //新增
            else {
                this.reset();
            }
        },
        //获取聊天室组成员
        getChatGroupUserData() {
            getChatGroupUserData(this.chatGroupUserParams).then(response => {
                this.chatGroupUserList = response.rows;
                this.chatGroupUserTotal = response.total;
            });
        },

        //提交单据
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateChatGroup(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getChatGroupUserData();
                        });
                    } else {
                        addChatGroup(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getChatGroupUserData();
                        });
                    }
                }
            });
        },
        //关闭弹窗，回到列表页面
        close() {
            //参数：path=在view目录下需要回到页面的路径，name为回到页面的组件name值
            //const obj = { path: "/pcj/chatGroup" ,name:"PcjChatGroup"};
            //跟上进入编辑页面的路由地址http://localhost/pcj/pcjBasicModule/chatGroup
            const obj = { path: "/pcj/pcjChatGroupModule/pcjChatGroup" };
            this.$tab.closeOpenPage(obj);

        }
    }
};
</script>

<style scoped></style>